window.onload = function() {

    //技能展示宽度自适应逻辑
    var skillLi = document.querySelectorAll('.skill_list li');
    var allPercent = document.querySelectorAll('.percent');
    var emWidth = skillLi[0].clientWidth - allPercent[0].clientWidth;
    var arr = [];
    Array.from(allPercent).map(obj => {
        arr.push(toPoint(obj.innerHTML))
    })
    window.onresize = resize;

    function resize() {
        emWidth = skillLi[0].clientWidth - allPercent[0].clientWidth;
        for (var i = 0; i < skillLi.length; i++) {
            skillLi[i].getElementsByTagName('em')[0].style.width = arr[i] * emWidth + 'px';
        }
    }
    resize();
    /*---------------------------------------------------------------------------*/

    // LG MD尺寸下分享小图标mouseover事件
    var icons = document.querySelectorAll('.share a');
    var nowW = document.documentElement.clientWidth;
    if (nowW >= 960) {
        for (var i = 0; i < icons.length; i++) {
            icons[i].onmouseenter = function() {
                this.style.backgroundPositionY = '-32px'
            }
            icons[i].onmouseleave = function() {
                this.style.backgroundPositionY = '0'
            }
        }
    }
    /*---------------------------------------------------------------------------*/
    // 下树状菜单点击切花对应页面事件
    var items = document.querySelectorAll('.items');
    var demosContent = document.querySelectorAll('.item_content');
    var goBack = document.querySelectorAll('.demos .back');
    var iNow = 0;
    //判断当前屏幕宽度
    if (nowW >= 960) {
        // LG MD尺寸屏幕下的处理
        for (var i = 0; i < items.length; i++) {
            items[i].index = i;
            items[i].onclick = function() {
                iNow = this.index;
                for (var j = 0; j < demosContent.length; j++) {
                    demosContent[j].style.display = 'none';
                    items[j].classList.remove('item_active');
                }
                demosContent[iNow].style.display = 'block';
                items[iNow].classList.add('item_active');
            }
        }
        items[0].click();
    } else {
        // 移动端下的处理
        for (var i = 0; i < items.length; i++) {
            items[i].index = i;
            items[i].addEventListener('click', itemClickFn);
            //移动端滑屏入口事件
            demosContent[i].addEventListener('touchstart', contentTouchStart);
        }
        for (var i = 0; i < goBack.length; i++) {
            goBack[i].addEventListener('click', backClickFn);
        }
    }

    //移动端点击树形菜单切换样式事件处理函数
    function itemClickFn(e) {
        iNow = this.index;
        for (var j = 0; j < demosContent.length; j++) {
            items[j].classList.remove('item_active');
        }
        demosContent[iNow].style.transform = 'translateX(0)';
        items[iNow].classList.add('item_active');

    }

    function backClickFn(e) {
        // 这里记得取消冒泡，不然会有bug 比例点击了返回按键会冒泡点击li导致无法滑回
        e.stopPropagation();
        console.log(demosContent[iNow]);
        demosContent[iNow].style.transform = 'translateX(100vw)';

    }

    /*---------------------------------------------------------------------------*/
    // 移动端滑屏
    //demos内容滑屏事件处理
    var lastY = 0;

    function contentTouchStart(e) {
        var mainBox = document.querySelector('.main_box');
        var documentHeight = document.documentElement.clientHeight;
        var headHeight = document.querySelector('.head').clientHeight;
        var startY = e.changedTouches[0].clientY;
        var disY = 0;
        var nowY = 0;
        e.stopPropagation();
        this.ontouchmove = function(e) {
            e.preventDefault();
            e.stopPropagation();
            nowY = e.changedTouches[0].clientY;
            disY = nowY - startY;
            if (mainBox.clientHeight > documentHeight - headHeight && lastY + disY > 0) {
                mainBox.style.transform = "translateY(0)"
                disY = -lastY;
            } else if (mainBox.clientHeight > documentHeight - headHeight && lastY + disY < -mainBox.clientHeight + documentHeight - headHeight) {
                mainBox.style.transform = "translateY(" +
                    (-mainBox.clientHeight + documentHeight - headHeight) + "px)";
                disY = -mainBox.clientHeight + documentHeight - headHeight - lastY;
            } else if (mainBox.clientHeight > documentHeight - headHeight) {
                mainBox.style.transform = "translateY(" +
                    (lastY + disY) + "px)";
            }

        }
        this.ontouchend = function() {
            lastY += disY;
        }

    }

    /*---------------------------------------------------------------------------*/
    // 树形菜单点击事件
    var treeList = document.querySelectorAll('.demos_list li h2');
    for (var i = 0; i < treeList.length; i++) {
        treeList[i].onclick = function(e) {
            e.stopPropagation();
            var isActive = this.firstChild.className;
            if (isActive) {
                this.firstChild.className = '';
                this.parentNode.getElementsByTagName('ul')[0].style.display = 'none';
            } else {
                this.firstChild.className = 'li_active';
                this.parentNode.getElementsByTagName('ul')[0].style.display = 'block';
            }

        }
    }

    /*---------------------------------------------------------------------------*/
    // 返回顶部


    var backtop = document.querySelector('.backtop');

    backtop.onclick = smoothscroll;

    window.onscroll = function() {
        backtop.style.display = document.documentElement.scrollTop > 300 ? 'block' : 'none';
        // console.log(document.documentElement.scrollTop);

    }

    function smoothscroll() {
        var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
        if (currentScroll > 0) {
            window.requestAnimationFrame(smoothscroll);
            window.scrollTo(0, currentScroll - (currentScroll / 5));
        }
    };

}

//百分数转小数
function toPoint(percent) {
    var str = percent.replace("%", "");
    str = str / 100;
    return str;
}